<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
</head>
<body>

<div id="app">

    <el-row :gutter="20">
        <el-col :span="4">
            <h3>这是左边的部门结构</h3>
            <el-tree :data="deptList" default-expand-all :props="defaultProps" :expand-on-click-node="false"  @node-click="handleNodeClick"></el-tree>
        </el-col>
        <el-col :span="20">
            <h3>这是右边的表格</h3>
            <el-input v-model="query.account" placeholder="登录名称模糊查询" style="width: 200px;" clearable></el-input>
            <el-input v-model="query.phone" placeholder="手机号模糊查询" style="width: 200px;" clearable></el-input>
            <el-select v-model="query.state" placeholder="请选择状态" clearable>
                <el-option label="启用" value="启用"></el-option>
                <el-option label="禁用" value="禁用"></el-option>
            </el-select>

            <el-date-picker
                    v-model="query.start"
                    type="date"
                    placeholder="选择日期1">
            </el-date-picker>-
            <el-date-picker
                    v-model="query.end"
                    type="date"
                    placeholder="选择日期2">
            </el-date-picker>

            <el-button type="primary" @click="toAdd">添加</el-button>
            <el-button type="warning" @click="exportData">导出</el-button>

            <el-upload
                    class="upload-demo" :on-success="uploadSuccess" :show-file-list="false"
                    action="/user/importData">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>

            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="account"
                        label="登录名称">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="用户名称">
                </el-table-column>
                <el-table-column
                        prop="dname"
                        label="部门">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="手机号">
                </el-table-column>
                <el-table-column
                        label="状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.state=='禁用'" type="danger">{{scope.row.state}}</el-tag>
                        <el-tag v-if="scope.row.state=='启用'" type="success">{{scope.row.state}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="创建时间">
                    <template slot-scope="scope">
                        {{scope.row.createTime|format('yyyy-MM-dd')}}
                    </template>
                </el-table-column>

                <el-table-column width="250"
                                 label="操作">
                    <template slot-scope="scope">
                        <el-button  size="small" >编辑</el-button>
                    </template>
                </el-table-column>

            </el-table>


            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="query.page"
                    :page-sizes="[1, 2, 3, 4]"
                    :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

        </el-col>
    </el-row>


    <el-dialog title="添加员工" :visible.sync="dialogFormVisible" top="5px">
        <el-form :model="form">
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="账号" :label-width="formLabelWidth">
                <el-input v-model="form.account" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="form.password" show-password autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="form.phone" type="number" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
                <el-input v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门" :label-width="formLabelWidth">
                <el-input v-model="dept.name" autocomplete="off" readonly>

                    <el-button slot="append" icon="el-icon-search" @click="chooseDept"></el-button>

                </el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-select v-model="form.sex" placeholder="请选择性别" clearable>
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-switch
                        v-model="form.state"
                        active-value="启用"
                        active-text="启用"
                        inactive-value="禁用"
                        inactive-text="禁用">
                </el-switch>
            </el-form-item>
            <el-form-item label="岗位" :label-width="formLabelWidth">
                <el-select v-model="sids" multiple placeholder="请选择岗位">
                    <el-option
                            v-for="item in sationList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="角色" :label-width="formLabelWidth">
                <el-checkbox-group v-model="rids">
                    <el-checkbox :label="r.id" v-for="r in roleList">{{r.name}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="form.remark" type="textarea" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addData">确 定</el-button>
        </div>
    </el-dialog>


    <el-dialog title="选择部门" :visible.sync="dialogFormVisibleDept" top="5px">
        <h3>请选择部门</h3>
        <el-tree :data="deptList" default-expand-all :props="defaultProps" :expand-on-click-node="false"  @node-click="chooseDeptOk"></el-tree>
    </el-dialog>


</div>
<script>
    new Vue({
        el:"#app",
        data:{
            deptList: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            //这些是页面展示需要的参数
            tableData:[],
            total:0,
            query:{
                did:"",
                account:"",
                phone:"",
                state:"",
                start:"",
                end:"",
                page:1,
                pageSize:2
            },

            dialogFormVisible: false,
            form: {
                name:"",
                did:"",
                phone:"",
                email:"",
                account:"",
                password:"",
                sex:"",
                state:"启用",
                sids:"",
                remark:"",
                rids:"",//存放选中的角色id，逗号分隔
            },
            dialogFormVisibleDept:false,
            dept:{},//选中的部门对象
            rids:[],//选中的角色id集合
            sids:[],//绑定选中的岗位
            formLabelWidth: '120px',
            sationList:[],//岗位集合
            roleList:[],
        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData();
                }
            }
        },

        filters:{
            format(value,arg){
                function dateFormat(date, format) {
                    if (typeof date === "string") {
                        var mts = date.match(/(\/Date\((\d+)\)\/)/);
                        if (mts && mts.length >= 3) {
                            date = parseInt(mts[2]);
                        }
                    }
                    date = new Date(date);
                    if (!date || date.toUTCString() == "Invalid Date") {
                        return "";
                    }
                    var map = {
                        "M": date.getMonth() + 1, //月份
                        "d": date.getDate(), //日
                        "h": date.getHours(), //小时
                        "m": date.getMinutes(), //分
                        "s": date.getSeconds(), //秒
                        "q": Math.floor((date.getMonth() + 3) / 3), //季度
                        "S": date.getMilliseconds() //毫秒
                    };
                    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
                        var v = map[t];
                        if (v !== undefined) {
                            if (all.length > 1) {
                                v = '0' + v;
                                v = v.substr(v.length - 2);
                            }
                            return v;
                        } else if (t === 'y') {
                            return (date.getFullYear() + '').substr(4 - all.length);
                        }
                        return all;
                    });
                    return format;
                }

                return dateFormat(value,arg);

            }
        },
        methods:{
            uploadSuccess(){
                this.$message.success("上传成功")
                this.initData();
            },
            exportData(){
                location.href = "/user/exportData"
            },
            addData(){
                this.form.did = this.dept.id;
                this.form.sids = this.sids.join(",");
                this.form.rids = this.rids.join(",");

                axios.post("/user/add",this.form).then(res=>{
                    this.$message.success("添加成功")
                    this.dialogFormVisible = false;
                    this.form = {
                        name:"",
                        did:"",
                        phone:"",
                        email:"",
                        account:"",
                        password:"",
                        sex:"",
                        state:"启用",
                        sids:"",
                        remark:"",
                        rids:"",//存放选中的角色id，逗号分隔
                    };
                    this.dept = {};
                    this.rids = [];
                    this.sids = []
                    this.initData();

                })

            },
            chooseDeptOk(data){
                this.dept = JSON.parse(JSON.stringify(data));
                this.dialogFormVisibleDept = false;
            },
            chooseDept(){
                this.dialogFormVisibleDept = true;
            },
            toAdd(){

                this.dialogFormVisible = true;
            },
            handleSizeChange(val) {
                this.query.pageSize = val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },
            handleNodeClick(data){
                console.log(data)
                this.query.did = data.id
            },
            initData(){
                axios.post(`/user/findPage?page=${this.query.page}&pageSize=${this.query.pageSize}`,this.query).then(res=>{
                    this.tableData = res.data.records
                    this.total = res.data.total
                    if(this.tableData.length==0&&this.query.page>1){
                        this.query.page--
                    }
                })

            },
            initDeptData(){
                axios.post("/dept/findAll",{}).then(res=>{
                    this.deptList = res.data;
                })
            },
            initSationData(){
                axios.post("/station/findAll").then(res=>{
                    this.sationList = res.data;
                })
            },
            initRoleData(){
                axios.post("/role/findAll").then(res=>{
                    this.roleList = res.data;
                })
            },

        },
        created(){
            this.initRoleData();
            this.initSationData();
            this.initDeptData();
            this.initData()
        }
    })
</script>




</body>
</html>
